<template>
	<scroll-view 
	class="container"
	scroll-y="true"
	style="height: 150vh;"
	>
			<view class="swiper-form">
			<swiper
				:indicator-dots="true"
				:autoplay="true"
				:interval="3000"
				:duration="500"
			>
				<swiper-item>
					<image src="/static/quanzhou/city1.png" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/quanzhou/city2.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/quanzhou/city3.jpg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="city-intro-container">
			<h3>泉州介绍</h3>
			<rich-text :nodes="cityIntro"></rich-text>
		</view>
		
		<view class="progress-container">
			<h3>探索进度</h3>
			<view class="progres-text">当前进度{{ progressPercent }}%</view>
			<progress :percent="progressPercent" show-info stroke-width="12"></progress>
		</view>
		
		<view class="city-choice-container">
			<h3>选择城市</h3>
			<view class="city-choice-text">当前选择：福建省-泉州市-丰泽区</view>
		</view>
		
		<view class="video-container">
			<video
			src="/static/quanzhou/city-video.mp4"
			controls
			autoplay="false"
			muted="false"
			loop="false"
			object-fit="contain"
			poster="/static/quanzhou/video-poster.jpg"
			class="video-player">
			</video>
			
			
		</view>
		
		<view class="preference-container">
			<h3>偏好设置</h3>
			
			<view class="item">
				<view class="lable">出行方式：{{travelMode}}</view>
				<radio-group :value="travelMode" @change="travelMode = $event.detail.value">
					 <radio value="bus">公交</radio>
					  <radio value="drive">自驾</radio>
					  <radio value="walk">步行</radio>
				</radio-group>
			</view>
			
			<view class="item">
				<view class="lable">显示推荐景点：</view>
				<switch @change="showRecommand = $event.detail.value" />
				<view class="site-list" v-if="showRecommand">
					<view v-for="(site,index) in sites" :key="index">
						<view>{{ site.name }}</view>
						<view>{{ site.desc }}</view>
					</view>
				</view>
			</view>
			
			<view class="item">
				<view class="lable">探索半径：{{ radius }}km</view>
				<slider :value="radius" max="20" min="1" @changing="radius = $event.detail.value"/>
			</view>
			
		</view>
		
	 </scroll-view>
	
</template>

<script>
	export default {
		data() {
			return {
				cityIntro : `
				<p>泉州是一座历史悠久的城市，有着深厚的文化底蕴。</p>
				<p><strong>它是古代海上丝绸之路的重要起点</strong>，在历史上有着重要的地位。</p>
				<p style="color: #ff5722;">这里有众多著名的景点，比如开元寺、清源山等，每年都吸引着大量的游客前来观光游览。</p>
				`,
				progressPercent: 60,
				
				travelMode: "bus",
				showRecommand: false,
				radius: 10,
				sites:[
					{
						name:"开元寺",
						desc:"福建省最大的佛教寺庙，拥有千年历史，东西塔为标志性建筑。"
					},
					{
						name:"清源山",
						desc:"泉州名山，有老君岩造像（宋代石雕），是道教文化圣地。"
					},
					{
						name:"西街",
						desc:"泉州最古老的街道，保留大量明清建筑，美食与古迹并存。"
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		width: 100%;
		min-height: 100vh;
		
		padding-top: 20rpx;
	}
	.container{
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		padding-bottom: 30rpx;
	}
	.swiper-form{
		width: 100%;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.1);
	}
	swiper{
		width: 100%;
		height: 300rpx;
		
	}
	image{
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.city-intro-container{
		padding: 20rpx;
		font-size: 16rpx;
		inline-size: 1.6;
	}
	.progress-container{
		padding: 20rpx;
	}
	.progres-text{
		font-size: 10rpx;
		color: gray;
	}
	.city-choice-container{
		padding:20rpx;
		
	}
	.city-choice-text{
		margin-top: 5px;
		background-color: darkgray;
		border-radius: 5rpx;
	}
	.preference-container{
		padding: 20rpx;
		background-color: #f2f3f5;
		border-radius: 12px;
		margin: auto 15rpx;
		 
	}
	.lable{
		font-size: 1.1em;
		padding-top: 2px;
		font-family: Arial, Helvetica, sans-serif;
	}
	.video-container {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding: 10px;
	}
	
	.video-player {
	  width: 100%;
	  height: 200px;
	  border-radius: 12px;
	}
</style>
